const path = require('path');

module.exports = {
    entry: { // 入口配置项
        file01: './src/entry01.js', // 多入口文件1，file1可以任意写
        file02: './src/entry02.js' // 多入口文件2，file2可以任意写
    },
    output: { // 出口配置项
        path: path.resolve(__dirname, 'dist'), // 绝对路径，注1
        filename: '[name].js' // 多出口文件名,动态[name]的值呼应entry选项里的entry1和entry2
    },
    module: { // 打包css、图片转换、压缩，把sass转换为css、es6转换为浏览器兼容的代码、react的语法转换成js代码
        rules: [
            {
                test:/\.css$/,
                use:['style-loader','css-loader'] // style-loader要写在css-loader前面，否则要报错的
                                                  // 需要分别安装npm install style-loader --save-dev 和 npm install css-loader --save-dev，
                                                  //style-loader的作用是处理css中的url，把url挂载到js'上(但background-image: url(../images/spring.png);无法处理，需要额外loader)，css-loader作用是找到样式、标签
                                                  // 这样打包出来的css通过js在head标签内添加style标签方式
                                                  // use 可以换成loader
                                                  // 或者：use: [ { loader: 'style-loader' }, { loader: 'css-loader' } ]
                
            }
        ]
    },
    plugins: [ // 插件

    ],
    devServer: { // 开发服务
        contentBase: path.resolve(__dirname, 'dist'), // 热更新，监听资源绝对路径
        host: '192.168.31.163', // 服务器地址
        compress: true, // 启用服务器压缩
        port: 1717 // 端口，可以任意取
    }
}

/*
    笔记：
        使用webpack打包的一个重要优点，是可以减少网络请求次数。因为css、图片、js文件被打包成一个js文件。以前index.html上要请求多个资源，打包后只要请求一次。网络请求是最占资源的。
        怎样减少文件数呢，可在webpack.config.js的module的rules选项内配置loader

        如果npm run server出现 listen EADDRNOTAVAIL 错误，由于监听一个当前电脑上不存在的ip的时候，是会出现上述该错误的。比如说原来我的电脑连着一个无线网，并且检查ip地址为192.168.1.123，并且我也用该地址进行监听。但是一旦电脑断开无线网，电脑上无该ip地址，若再次用该地址进行监听，则会出现上述错误。

        将这个异常名字分解开来就是E ADDR NOT AVAIL
        E：Error
        ADDR：Address
        NOT：Not
        AVAIL：Available
        合起来的意思就是这个ip地址是not available的，读者如果遇到这样子的错误就去看看自己的ip地址对不对。
*/